<template>
  <div class="cs-page-container">
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >

        <el-table-column
          align="center"
          label="id"
        >

          <template slot-scope="{ row }">
            {{ row.id }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="字段名"
        >

          <template slot-scope="{ row }">
            {{ row.mongoField }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="字段描述"
        >

          <template slot-scope="{ row }">
            {{ row.desc }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="onUpdate(row)"
            >编辑</el-button>
          </template>
        </el-table-column>

      </el-table>

    </div>
    <el-dialog
      :title="'编辑:' + operationInfo.field"
      :visible.sync="dialogFormVisible"
      width="800px"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :model="operationInfo"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
        @submit.native.prevent="confirm"
      >
        <el-form-item
          label="字段"
          property="field"
        >
          <span>{{ operationInfo.field }}</span>
        </el-form-item>

        <el-form-item
          label="字段描述:"
          prop="title"
        >
          <el-input ref="edit" v-model.trim="operationInfo.desc" maxlength="60" />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="confirm"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  dictList, updateDict
  // addAtomField,
  // updateAtomField,
  // deleteAtomField
} from '@/api/bx';

export default {
  name: 'DisplayFieldList',
  data() {
    return {
      list: [],
      listLoading: true,
      dialogFormVisible: false,
      operationInfo: {
        display: null,
        id: null
      },
      rules: {
        display: [{ required: true, message: '不能为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      dictList().then(resp => {
        this.list = resp.data.list
        this.listLoading = false
      })
    },

    onUpdate(row) {
      this.operationInfo = {
        id: row.id,
        field: row.mongoField,
        desc: row.desc
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['edit'].focus()
        this.$refs['edit'].select()
      })
    },

    confirm() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updateDict(this.operationInfo).then(resp => {
            this.doSearch()
          })
        }
      })
      this.dialogFormVisible = false
    }

  }
}
</script>

<style scoped>

</style>
